<template>
	<div class="com-container">
		<div class="com-chart" ref="rank_ref"></div>
	</div>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		getThemeValue
	} from '@/utils/theme_utils'
	export default {
		name: 'Seller',
		data() {
			return {
				chartInstance: null,
				allData: [],
				echarttimerId: "",
				echartoption: {}
			}
		},
		created() {
			this.$socket.registerCallBack('rankData', this.getData)
		},
		computed: {
			...mapState(['theme'])
		},
		mounted() {
			this.initChart();
			//this.getData();
			this.$socket.send({
				action: 'getData',
				socketType: 'rankData',
				chartName: 'rank',
				value: ''
			})
			window.addEventListener("resize", this.screenAdapter);
			this.screenAdapter()
		},
		destroyed() {
			clearInterval(this.echarttimerId);
			window.removeEventListener("resize", this.screenAdapter);
			this.$socket.unRegisterCallBack('rankData');
		},
		methods: {
			//初始化图表
			initChart() {
				this.chartInstance = this.$echarts.init(this.$refs.rank_ref, this.theme);
				this.echartoption = {
					backgroundColor: getThemeValue(this.theme).backgroundColor,
					title: {
						text: '▎ 地区销售排行',
						left: 20,
						top: 20
					},
					grid: {
						top: "20%",
						left: "6%",
						right: "6%",
						bottom: "6%",
						containLable: true
					},
					xAxis: {
						type: 'category',
						axisLine: {
							lineStyle: {
								color: "auto",
							}
						},
					},
					"dataZoom": [{
						show: false,
						"type": "slider",
						"xAxisIndex": 0,
						"zoomLock": false,
						"height": 2,
						"showDetail": false,
						"startValue": 0,
						"endValue": 5,
						"borderWidth": 0,
						"borderColor": "transparent",
						"backgroundColor": "#feffff",
						"fillerColor": "#666",
						"showDataShadow": false,
						"brushSelect": false,
						"width": "80%",
						"bottom": "20",
						"handleStyle": {
							"color": "#666"
						},
						"handleIcon": "path://M512 512m-320 0a320 320 0 1 0 640 0 320 320 0 1 0-640 0Z"
					}],
					yAxis: {
						type: "value",
						axisLine: {
							show: true,
							lineStyle: {
								color: "auto",
							},
						},
						splitLine: {
							show: false,
						},
						axisLabel: {},
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: "shadow",
							z: 0,
							shadowStyle: {
								color: '#2d3443'
							}
						}
					},
					series: [{
						type: "bar",
						label: {
							show: true,
							position: "top"
						},
						itemStyle: {
							color: arg => {
								if (arg.value > 300) {
									return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: "#0ba82c",
										},
										{
											offset: 1,
											color: "#4ff778",
										},
									])
								} else if (arg.value > 200) {
									return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: "#2e72bf",
										},
										{
											offset: 1,
											color: "#23e5e5",
										},
									])
								} else {
									return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: "#5052ee",
										},
										{
											offset: 1,
											color: "#ab6ee5",
										},
									])
								}
							}
						}
					}]
				};
				this.chartInstance.setOption(this.echartoption);
				this.chartInstance.on("mouseover", () => {
					clearInterval(this.echarttimerId)
				});
				this.chartInstance.on("mouseout", () => {
					this.startInterval()
				});
			},
			//获取数据
			getData(ret) {
				// const {
				// 	data: ret
				// } = await this.$http.get("rank");
				this.allData = ret;
				this.allData.sort((a, b) => {
					return b.value - a.value;
				})
				this.updataChart()
			},
			//更新图表
			updataChart() {
				const sellerNames = this.allData.map((item) => {
					return item.name
				})
				const sellervalues = this.allData.map((item) => {
					return item.value
				})
				const dataoption = {
					xAxis: {
						data: sellerNames
					},
					series: [{
						data: sellervalues
					}]
				};
				this.chartInstance.setOption(dataoption);
				this.startInterval();
			},
			startInterval() {
				if (this.echarttimerId) {
					clearInterval(this.echarttimerId);
				}
				if (this.allData.length > 4) {
					this.echarttimerId = setInterval(() => {
						if (Number(this.echartoption.dataZoom[0].endValue) === this.allData.length - 1) {
							this.echartoption.dataZoom[0].endValue = 5;
							this.echartoption.dataZoom[0].startValue = 0
						} else {
							this.echartoption.dataZoom[0].endValue = this.echartoption.dataZoom[0].endValue + 1;
							this.echartoption.dataZoom[0].startValue = this.echartoption.dataZoom[0].startValue + 1
						}
						this.chartInstance.setOption(this.echartoption);
					}, 3000);
				}
			},
			screenAdapter() {
				// console.log(this.$refs.rank_ref.offsetWidth);
				const titleFontSize = this.$refs.rank_ref.offsetWidth / 100 * 3.6;
				const adapterOtion = {
					title: {
						textStyle: {
							fontSize: titleFontSize
						}
					},
					tooltip: {
						axisPointer: {
							shadowStyle: {
								width: titleFontSize
							}
						}
					},
					series: [{
						barWidth: titleFontSize,
						itemStyle: {
							borderRadius: [titleFontSize / 2, titleFontSize / 2, 0, 0]
						}
					}]
				};
				this.chartInstance.setOption(adapterOtion);
				this.chartInstance.resize();
			}
		},
		watch: {
			theme() {
				console.log('主题切换了')
				this.chartInstance.dispose() // 销毁当前的图表
				this.initChart() // 重新以最新的主题名称初始化图表对象
				this.screenAdapter() // 完成屏幕的适配
				this.updataChart() // 更新图表的展示
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>

</style>
